<template>
    <div style="width:100%;overflow: hidden;" id="div2">
        <div id="bg-blur">
            <div style="position: absolute;top: 25;width: 100%;z-index: 10;" id="div1">
                <center style="margin-top: 30px;margin-right: 200px;">
                    <label>
                        <input type="text" v-model="text" :maxlength="15" placeholder="添加计划" @keyup.enter="addplan" />
                    </label>
                    <table style="width: 50%;margin-top: 30px;" id="table">
                        <tbody>
                            <tr v-for="plan in plans" :key="plan.id" @dblclick="remove(plan.id)" id="tr">
                                <td style="width: 40%;">{{ plan.plan }}</td>
                                <td style="width: 40%;">已完成 {{ plan.count }} 天</td>
                                <td style="width: 20%;">
                                    <button @click="finish(plan.id)">完成任务</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </center>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    data() {
        return {
            plans: JSON.parse(localStorage.getItem('plans')) || [],
            text: ''
        }
    },
    computed: {
        plan() {
            return {
                id: Number(Math.random().toString().substr(3, length) + Date.now()).toString(36),
                plan: this.text,
                count: 0,
                yesterday: '',
                today: moment().format('yyyy/MM/DD')
            }
        }
    },
    created() {
        this.plans.forEach(plan => {
            plan.today = moment().format('yyyy/MM/DD')
        })
    },
    mounted() {
        this.setBody()
        window.onresize = () => {
            return (() => {
                this.setBody()
            })()
        }
    },
    methods: {
        height() {
            const h1 = document.body.offsetHeight - 140
            const h2 = document.getElementById('div1').offsetHeight + 80
            return h1 > h2 ? h1 : h2
        },
        width() {
            const w1 = document.body.offsetWidth
            const w2 = document.getElementById('tr').offsetWidth + 80
            return w1 > w2 ? w1 : w2
        },
        setBody() {
            document.getElementById("div2").style.height = this.height() + 'px'
            // document.getElementById("div2").style.width = this.width() + 'px'
        },
        addplan() {
            if (this.text !== '') {
                if (this.plans.length < 10) {
                    this.plans.push(this.plan)
                    this.setBody();
                    this.text = ''
                    localStorage.setItem('plans', JSON.stringify(this.plans))
                } else {
                    alert('每天的计划不要太多哟')
                    this.text = ''
                }
            }
        },
        finish(id) {
            this.plans.forEach(plan => {
                if (plan.id === id) {
                    if (plan.today !== plan.yesterday) {
                        this.$message.success('恭喜你完成了今天的' + plan.plan)
                        plan.count++
                        plan.yesterday = plan.today
                    } else {
                        this.$message.info('今天已完成' + plan.plan + '，明天再来吧，再接再厉', 2)
                    }
                }
            })
            localStorage.setItem('plans', JSON.stringify(this.plans))
        },
        remove(id) {
            var result = confirm("确定要删除这条计划吗？");
            if (result) {
                this.plans = this.plans.filter(plan => plan.id !== id)
                this.setBody()
                localStorage.setItem('plans', JSON.stringify(this.plans))
            }
        }
    }
}
</script>

<style lang="less" scoped>
html {
    // width: 100%;
    // height: 100%;
}

#bg-blur {
    background: url('../assets/image/zlj/bg.gif');
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 0;
}

input {
    border: none;
    border-bottom: 2px solid #80848f;
    width: 40%;
    height: 30px;
    text-align: center;
    outline: none;
    font: 500 15px "微软雅黑 Light";
    color: #1c2438;
    background: none;
}

input:focus {
    border-bottom: 2px solid #01AAED;
}

button {
    border: none;
    background-color: #ffffff;
    outline: none;
    width: 100px;
    height: 40px;
    color: #2F4056;
    font: 500 16px "微软雅黑 Light";
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    margin-left: 30px;
}

button:hover {
    box-shadow: 0 0 10px #F0F0F0;
}


tr {
    display: block;
    border: 3px solid #4a677d;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
    color: #f0cf4d;
    width: 650px;
}

td {
    text-align: center;
    padding: 10px 50px;

}
</style>